import React from 'react';
import { isContain } from '../../util/common';
class MarqueeCom extends React.Component {
    constructor(props){
        super(props);
        this.autoMarquee = this.autoMarquee.bind(this);
        this.isMarquee = this.isMarquee.bind(this);
        this.marquee = this.marquee.bind(this);
        this.myScroll = this.myScroll.bind(this);
    }

    autoMarquee(eid,scolltype, height, scrollSpeed, ebaseid, showModeId) {

        if(this.intId){
            this.intId.map(item => {
                clearInterval(item);
            })
        }
        $('.homepage').find(`#tabcontant_${eid}`).css("overflow-y", "auto");
        let box = $(`#content_${eid} .wea-new-table .ant-table-body>table`);
        if(ebaseid == '7') {
            let box1 = $(`#content_${eid} .portal-news-content`);
            let box2 = $(`#tabcontant_${eid} .ant-spin-container>div>div`)[0];
            $(box1).unbind('mouseenter').unbind('mouseleave');
            if(showModeId == '2' || showModeId == '3' || showModeId == '6' ) { //上图式、左图式、摘要式
                box = $(`#content_${eid} .portal-news-content`);
            }
            $(box2).unbind('mouseenter').unbind('mouseleave');
            $(box2).css('margin-top','0px');
        }else if(ebaseid == 'notice') {
            box = $(`#content_${eid} .portal-element-newnotice-com`);
        }
        $(box).unbind('mouseenter').unbind('mouseleave');
        $(box).css('margin-top','0px');

        $("#titleContainer_"+eid).css({'position':'relative','z-index':'1'})
        let div = $("#content_"+eid +" .ant-spin-container")[1];
        let div2 = $("#content_"+eid +" .ant-spin-container")[0];
        if(!div && !div2){
            return ;
        }
        if(!div){
            div = div2
        }
        if(ebaseid && ebaseid == 'notice'){
            div = $("#content_"+eid +" .newnotice-add-Carousel")[0];
        }
        div.onmouseout = () =>{};
        div.style.left = "0px";
        if(ebaseid == '7') {
            if(showModeId == '11') {//上图式3
                $('.homepage').find(`#tabcontant_${eid}`).css("overflow-y", "auto");
                return;
            }
        }
        if((scolltype == 'up' || scolltype=='down') && (ebaseid == '7' || ebaseid == '8' || ebaseid == 'notice')){
            $('.homepage').find(`#content_view_id_${eid}`).css("overflow-y", "hidden");
            $('.homepage').find(`#tabcontant_${eid}`).css("overflow-y", "hidden");
            $(`#content_${eid} .wea-new-table .ant-table-body>table`).css("position", "relative");
            $(`#content_${eid} .wea-new-table .ant-table-thead`).css("display", "none");
            let elementHight = $(`#content_${eid}`).height();
            if(ebaseid == '7') {
                let sh = $(`#content_${eid} .wea-new-table .ant-table-row`).height();
                let row = $(`#content_${eid} .wea-new-table .ant-table-row`);
                let box = $(`#content_${eid} .wea-new-table .ant-table-body>table`);
                if(showModeId == '2' || showModeId == '3' || showModeId == '6' ) { //上图式、左图式、摘要式
                    sh = $(`#content_${eid} .portal-news-content .portal-news-com`).height();
                    box = $(`#content_${eid} .portal-news-content`);
                    row = $(`#content_${eid} .portal-news-content .portal-news-com`);
                }else if(showModeId == '10') { //上图式2
                    let pictureHieght = $(`#content_${eid} .mews-img`).height()
                    let summaryHieght = $(`#content_${eid} .mews-content`).height();
                    elementHight = parseInt(elementHight) - parseInt(pictureHieght) - parseInt(summaryHieght) - 10;
                }else if(showModeId == '8' || showModeId == '9') { //头条式、头条式2
                    let summaryHieght = $(`#content_${eid} .mews-summary`).height()
                    elementHight = parseInt(elementHight) - parseInt(summaryHieght);
                }else if(showModeId == '5' || showModeId == '7') { //双列式、摘要式2
                    $('.homepage').find(`#tabcontant_${eid}`).css("overflow-y", "auto");
                    return;
                }
                this.myScroll({
                    elementHight: elementHight,
                    box: box,
                    rowHeight: sh, //li的高度
                    marquee: this.marquee, //
                });
            }else if(ebaseid == '8') {
                let sh = $(`#content_${eid} .wea-new-table .ant-table-row`).height();
                let row = $(`#content_${eid} .wea-new-table .ant-table-row`);
                let box = $(`#content_${eid} .wea-new-table .ant-table-body>table`);
                this.myScroll({
                    elementHight: elementHight,
                    box: box,
                    rowHeight: sh, //li的高度
                    marquee: this.marquee, //
                });
            }else if(ebaseid == 'notice') {
                let sh = $(`#content_${eid} .portal-element-newnotice-item`).height();
                let row = $(`#content_${eid} .portal-element-newnotice-item`);
                let box = $(`#content_${eid} .portal-element-newnotice-com`);
                elementHight = $(`#content_${eid}`).height();
                this.myScroll({
                    elementHight: elementHight,
                    box: box,
                    rowHeight: sh, //li的高度
                    marquee: this.marquee, //
                });
            }
        }else {
            $("#titleContainer_"+eid).css({'position':'relative','z-index':'1'})
            let div = $("#content_"+eid +" .ant-spin-container")[1];
            let div2 = $("#content_"+eid +" .ant-spin-container")[0];
            if(!div && !div2){
                return ;
            }
            if(!div){
                div = div2
            }

            if(ebaseid && ebaseid == 'notice'){
                div = $("#content_"+eid +" .newnotice-add-Carousel")[0];
            }

            let offsetWidth = parseInt(div.offsetWidth)
            let offsetHeight = parseInt($("#tabcontant_"+eid)[0].offsetHeight)

            div.style.left = 0;
            div.style.top = 0;
            if(this.isMarquee(scolltype)){
                if(scolltype == 'right'){
                    div.style.left = -offsetWidth+"px"
                    this.myInterval = setInterval( function  (){

                        let left = parseInt(div.style.left.split("px")[0]);
                        if(left >= offsetWidth ){
                            div.style.left = -div.offsetWidth+"px"
                        }else{
                            const i = (div.style.left+"").split('px')[0]
                            div.style.left = parseInt(i)+1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'left'){
                    div.style.left = offsetWidth+"px"
                    this.myInterval = setInterval( function  (){

                        let left = parseInt(div.style.left.split("px")[0])
                        if(left <=-offsetWidth ){
                            div.style.left = div.offsetWidth+"px"
                        }else{
                            const i = (div.style.left+"").split('px')[0]
                            div.style.left = parseInt(i)-1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'up'){
                    $('.homepage').find(`#content_view_id_${eid}`).css("overflow-y", "hidden")
                    div.style.top = offsetHeight+"px";
                    this.myInterval = setInterval( function  (){

                        let top = parseInt(div.style.top.split("px")[0])
                        if(top <=-offsetHeight ){
                            div.style.top = div.offsetHeight+"px"
                        }else{
                            const i = (div.style.top+"").split('px')[0]
                            div.style.top = parseInt(i)-1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'down'){
                    $('.homepage').find(`#content_view_id_${eid}`).css("overflow-y", "hidden")
                    div.style.top = -offsetHeight+"px"
                    this.myInterval = setInterval( function  (){

                        let top = parseInt(div.style.top.split("px")[0])
                        if(top >=offsetHeight){
                            div.style.top = -div.offsetHeight+"px"
                        }else{
                            const i = (div.style.top+"").split('px')[0]
                            div.style.top = parseInt(i)+1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }
            }else {
                $('.homepage').find(`#content_view_id_${eid}`).css("overflow-y", "auto")
            }
            div.onmouseover = () => {
                clearInterval(this.myInterval)
            };
            div.onmouseout = () =>{
                let div = $("#content_"+eid +" .ant-spin-container")[1];
                if(ebaseid && ebaseid == 'notice'){
                    div = $("#content_"+eid +" .newnotice-add-Carousel")[0];
                }
                if(scolltype == 'right'){
                    this.myInterval = setInterval( function  (){

                        let left = parseInt(div.style.left.split("px")[0])
                        if(left >= offsetWidth ){
                            div.style.left = -div.offsetWidth+"px"
                        }else{
                            const i = (div.style.left+"").split('px')[0]
                            div.style.left = parseInt(i)+1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'left'){
                    this.myInterval = setInterval( function  (){

                        let left = parseInt(div.style.left.split("px")[0])
                        if(left <=-offsetWidth ){
                            div.style.left = div.offsetWidth+"px"
                        }else{
                            const i = (div.style.left+"").split('px')[0]
                            div.style.left = parseInt(i)-1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'up'){
                    this.myInterval = setInterval( function  (){

                        let top = parseInt(div.style.top.split("px")[0])
                        if(top <=-offsetHeight){
                            div.style.top = div.offsetHeight+"px"
                        }else{
                            const i = (div.style.top+"").split('px')[0]
                            div.style.top = parseInt(i)-1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }else if(scolltype == 'down'){
                    this.myInterval = setInterval( function  (){

                        let top = parseInt(div.style.top.split("px")[0])
                        if(top >=offsetHeight){
                            div.style.top = -div.offsetHeight+"px"
                        }else{
                            const i = (div.style.top+"").split('px')[0]
                            div.style.top = parseInt(i)+1+"px"
                        }
                    }.bind(this),scrollSpeed)
                }
            };
        }
    }

    marquee(obj, step, box){
        const {scolltype, eid, showModeId, ebaseid} = this.props;
        let marginTop = "-=1";
        if(scolltype == 'down'){
            marginTop = "-=-1";
        }
        $(box).animate({
            marginTop: marginTop,
        },0,function(){
            var s = Math.abs(parseInt($(this).css("margin-top")));
            let row = $(`#content_${eid} .wea-new-table .ant-table-row`);
            if(ebaseid == '7'){
                if(showModeId == '2' || showModeId == '3' || showModeId == '6') { //上图式、左图式、摘要式
                    row = $(`#content_${eid} .portal-news-content .portal-news-com`);
                }
            }else if(ebaseid == 'notice'){
                row = $(`#content_${eid} .portal-element-newnotice-item`);
            }
            const length = row.length;
            if(s >= step){
                if(scolltype == 'up'){
                    row.slice(0, 1).appendTo($(this));
                }else {
                    row.slice(length-2, length-1).prependTo($(this));
                }
                $(this).css("margin-top", 0);
            }
        });
    }

    myScroll(options){
        //默认配置
        var defaults = {
            rowHeight:24, //每行的高度
            scolltype: 'up', //方向
        };
        const { scrollSpeed = '20', ebaseid }  = this.props;
        let opts = $.extend({}, defaults, options);

        const sh = opts["rowHeight"];
        const box = opts["box"];
        const elementHight = opts["elementHight"];
        const marquee = opts["marquee"];
        const _this = $(box);
        this.intId = [];
        const _self = this;
        box.each(function(i){
            _self.intId[i] = setInterval(function(){
                if(box.height()<=elementHight){
                    clearInterval(_self.intId[i]);
                }else{
                    marquee(_this, sh, box);
                }
            }, scrollSpeed);
            _this.hover(function(){
                clearInterval(_self.intId[i]);
            },function(){
                clearInterval(_self.intId[i]);
                _self.intId[i] = setInterval(function(){
                    if(box.height()<=elementHight){
                        clearInterval(_self.intId[i]);
                    }else{
                        marquee(_this, sh, box);
                    }
                }, scrollSpeed);
            });
        });

    }

    componentDidMount() {
        const {eid,scolltype, height,tabdata, scrollSpeed = '20', ebaseid, showModeId} = this.props;
        if(tabdata && tabdata.data && tabdata.data.length == 0 ){
            this.autoMarquee(eid,"none", height, scrollSpeed);
        }else{
            this.autoMarquee(eid,scolltype, height, scrollSpeed, ebaseid, showModeId);
        }
    }

    componentDidUpdate(){
        const { eid,scolltype, height,tabdata, scrollSpeed = '20', ebaseid, showModeId }  = this.props;
        clearInterval(this.myInterval);
        if(tabdata && tabdata.data && tabdata.data.length == 0 ){
            this.autoMarquee(eid,"none", height, scrollSpeed);
        }else{
            this.autoMarquee(eid,scolltype, height, scrollSpeed, ebaseid, showModeId);
        }
    }

    componentWillUnmount(){
        const {scolltype } = this.props;
        if(this.isMarquee(scolltype)){
            clearInterval(this.myInterval);
        }
    }
    isMarquee(scolltype){
        const arr = ['up','down','left','right'];
        return isContain(arr, scolltype);
    }
    addMarqueeAttrs(eid, scolltype,height) {
		var attrs = {
            direction: scolltype,
            onmouseover: 'this.stop()',
            onmouseout: 'this.start()',
            scrolldelay: '200'
        };
        if (scolltype === 'up' || scolltype === 'down') {
            attrs['width'] = '100%';
            attrs['height'] = height;
        }
        $("#webjx_" + eid).attr(attrs);
    }
    render() {
        const { eid, children, scolltype,height, ebaseid } = this.props;
        $(children)
        if(this.isMarquee(scolltype)){
            //return <marquee id={`webjx_${eid}`}> { children } </marquee>
            if(ebaseid && ebaseid == 'notice'){
                return  <div  style={{position:'relative',display:'inline-block', width: '100%', overflow: 'hidden'}}>{children}</div>
            }
            return  <div  style={{position:'relative',display:'inline-block', width: '100%'}}>{children}</div>
        }else return <div>{children}</div>;
    }
}
export default MarqueeCom;